<template>
  <div v-loading="pageLoading">
    <!-- <div class="filter-container">
      <el-input style="width: 300px" placeholder="料号/物料名/物料序号" clearable prefix-icon="el-icon-search"
        class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.queryString.kpn"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div> -->
    <z-table :list="list" :tableProps="tableProps" :columns="columns">
      <template v-slot:content="v">
        <span v-if="v.key == 'error_flag'"><span :class="v.row.statusClass">{{v.row[v.key]}}</span></span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
const statusArry = { 0: 'OK', 1: 'NG' }
const statusClass = { 0: 'bg-green', 1: 'bg-red' }

export default {
  mixins: [commonMixin],
  props: {
    sn: {
      type: String,
      default: '',
    },
  },
  watch: {
    sn: {
      handler(n, o) {
        if (n) {
          this.query.queryString.sn = n
          this.getList()
        } else {
          this.list = []
          this.total = 0
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      tableProps: {
        hideOperations: true,
      },
      api: '',
      apiList: this.$api.wipLogReport,
      query: {
        queryString: {
          sn: null,
        },
        page: 1,
        size: 10,
      },
      columns: [
        { title: '流水号', key: 'serial_number', width: 170 },
        { title: '操作类型', key: 'wip_log_type', width: 120 },
        { title: '线别', key: 'line_name', width: 120 },
        { title: '工序', key: 'group_name', width: 150 },
        { title: '过站时间', key: 'in_station_time', width: 170 },
        { title: '操作人员', key: 'in_station_by', width: 100 },
        { title: '检验状态', key: 'error_flag', width: 90 },
        { title: '良品数量', key: 'batch_qty', width: 90 },
        { title: '备注', key: 'remarks' },
      ],
    }
  },
  created() {},
  methods: {
    formatList(data) {
      return data.map((item) => {
        let tmp = { ...item }
        tmp.statusClass = 'text-label ' + statusClass[tmp.error_flag]
        tmp.error_flag = statusArry[tmp.error_flag]
        return tmp
      })
    },
  },
}
</script>

<style>
</style> 